
/* 导航切换显示 */
$('#nav-top .col-xs-1').mousemove(function(){
  $(this).find('.item').addClass('item-show');
});
$('#nav-top .col-xs-1').mouseout(function(){
  $('#nav-top .col-xs-1').find('.item').removeClass('item-show');
});

/* 侧边导航切换显示 */
$('.side-cate ').mousemove(function(){
  $(this).find('.children').addClass('children-show');
});
$('.side-cate ').mouseout(function(){
  $('.side-cate ').find('.children').removeClass('children-show');
})

/* 侧边栏hover效果 */
var backIndex=$('.back-top li');
backIndex.mousemove(function(){
  $(this).find(".glyphicon").hide();
  $(this).find(".backShow").show().css('background-color','red');
});
backIndex.mouseout(function() {
  $(this).find(".glyphicon").show();
  $(this).find(".backShow").hide();
});

/* 顶部导航固定  */
//获取导航距离顶部的位置
var navTop=$('#nav-top').offset().top;
$(window).scroll(function(){
  //滚动条的滚动距离
  var scrTop=$(window).scrollTop();
  if(scrTop>=navTop){
    $('#nav-top').addClass('site-header-fixed')
  }else{
    $('#nav-top').removeClass('site-header-fixed')
  }
  
});

/*商品详情*/
// 商品详情渲染数据
$.ajax({
  url: './data/goodlist.json',
  type: 'get',
  dataType: 'json',
  success: function (data) {
    //console.log(data)
    // 遍历所有数据
    var strDom = ''
    $.each(data, function (index, item) {
        var goods = `
        <div class="col-xs-3" style="position: relative;" id-data-1="${item.id}">
            <div class="figure">
              <a href="details.html" title="${item.title}">
              <img class="layz" data-original="${item.imgurl}" alt="${item.title}" src="${item.imgurl}" style="display: inline;">
              </a>
            </div>
            <h4 class="text-uppercase figure-title">${item.title}</h4>
            <div class="figure-title figureColor">${item.rate}</div>
            <p class="price" style="display: block;">￥${item.price}</p>
            <div class="wrapper" style="display: none;">
              <a href="addtocart.html" type="button" class="btn btn-default">加入购物车</a>
              <a href="login.html" type="button" class="btn btn-danger">立即购买</a>
            </div>
        </div>
        `
        strDom += goods
    })
    $('.gl-default').html(strDom)
    var iddata_1= $('.col-xs-3').attr('id-data-1')
    localStorage.setItem('id-data1',iddata_1)
  }
}) 
//加入购物车 立刻购买样式切换
$('.col-xs-3 .price').mousemove(function(){
  $(this).css('display','block')
});
$('.col-xs-3 .price').mouseout(function(){
  $(this).css('display','none')
});

//id对比相等后跳转详情页 详情渲染
$('.gl-default').on('click','.col-xs-3',function(){
  location.href='details.html';
})


/* 首页主要产品数据渲染 */
$.ajax({
  url: './data/star_product.json',
  type: 'get',
  dataType: 'json',
  success: function (data) {
    //console.log(data)
    // 遍历所有数据
    var strDom = ''
      $.each(data, function (index, item) {
          var konkas = ` 
          <div class="goods_star" id-data-2="${item.id}">
							<div class="star_1">
								<a href="details.html" title="${item.title}">
									<img src="${item.imgurl}"/>
								</a>
							</div>
							<h4>${item.title}</h4>
							<div class="ellipsis">${item.ra}</div>
							<p>￥${item.price}
								<span>&nbsp;￥${item.price_sel}</span>
							</p>
					</div>   
          `
          strDom += konkas
    })
    $('.content .scroll').html(strDom)
    $('.content .container').html(strDom)
    var iddata_2 = $('.goods_star').attr('id-data-2')
    //console.log(iddata_2)
    localStorage.setItem('id-data2',iddata_2)
  }
}) 

/* 首页  产品翻页效果 */
//当单击产品列表右上角的"左右"按钮时,产品列表就可以按照单击的方向横向滚动
$(function(){
  var page = 1;
  var i = 4; //每版放4个图片
  var len = $(".goods_star").length;
  var page_count = Math.ceil(len / i) ;   //只要不是整数，就往大的方向取最小的整数
  var none_unit_width = $(".content").width(); //获取框架内容的宽度,不带单位
  var $parent = $(".scroll"); 
  //向右 按钮
  $(".product .pro_top .more .arrow_right").click(function(){ 
  if( !$parent.is(":animated") ){
    if( page == page_count){  //已经到最后一个版面了,如果再向后，必须跳转到第一个版面。
      $parent.animate({ 
        left : 0
      }, 800); //通过改变left值，跳转到第一个版面
      page = 1;
    }else{
      $parent.animate({ 
        left : '-='+none_unit_width
      }, 800);  //通过改变left值，达到每次换一个版面
      page++;
    }
  }
 });
  //往左 按钮
  $(".product .pro_top .more .arrow_left").click(function(){
    if( !$parent.is(":animated") ){
      if( page == 1){  //已经到第一个版面了,如果再向前，必须跳转到最后一个版面。
        $parent.animate({ 
          left : '-='+none_unit_width*(page_count-1)
        }, 800); //通过改变left值，跳转到最后一个版面
        page = page_count;
      }else{
        $parent.animate({ 
          left : '+='+none_unit_width 
      }, 800);  //通过改变left值，达到每次换一个版面
        page--;
      }
    }
  });
});

